<template>
	<div class="finance_tables">
		<div class="finance_table_box">
			<el-tabs v-model="activeName1" @tab-click="handleClick" v-if="financeVisi.visibled">
				<el-tab-pane label="支付记录" index="expense" name="expense"></el-tab-pane>
				<el-tab-pane label="充值记录" index="recharge" name="recharge"></el-tab-pane>
				<el-tab-pane label="提现记录" index="encashment" name="encashment"></el-tab-pane>
			</el-tabs>
			<finance-search></finance-search>
			<div class="finance_table">
				<el-table :data="payments" stripe style="width: 100%">
					<el-table-column prop="price" label="充值金额">
						<template scope="scope">
							<span>¥{{scope.row.price }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作人">
						<template scope="scope">
							<span>{{ current_user.real_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作时间">
						<template scope="scope">
							<span>{{ new Date(scope.row.updated_at * 1000).Format("yyyy-MM-dd") }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class='page'>
				<el-pagination commonsmall @current-change='handlePafe' layout="prev, pager, next" :page-size="financePage.current_total" :total="financePage.total_count"></el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapActions, mapState, mapGetters } from 'vuex'
	import Search from './Search.vue'
	export default {
		data() {
			return {
				activeName1: 'expense',
				page: { next_page: 1, total_count: 10, total_pages: 1 },
			}
		},
		computed: {
			...mapGetters([
				'payments', 'financePage', 'financeTab', 'financeVisi','current_user'])
		},
		components: {
			'finance-search': Search,
		},
		mounted() {
			this.getFinance({ kind: this.activeName1, page: this.page.next_page, limit: 10 })
		},                       
		methods: {
			...mapActions(['getFinance']),
			handleClick() {
				this.getFinance({ page: this.page.next_page, limit: 10 })
			},
			handlePafe(e) {
				this.getFinance({ page: e, limit: 10 })
			}
		}
	}
</script>
<style lang='scss'>
	.finance_tables{
		border: 1px solid #e0e6ed;
		padding: 40px;
        display: flex;
        max-width:90%;
	}
	.finance_table_box {
		>.finance_table:nth-child(2) {
			padding: 0px 40px 0px 0px;
		}
		width:100%;
		.finance_table {
			display: flex;
			padding: 40px 40px 40px 0px;
		}
		.page {
			text-align: right;
			padding: 0px 40px 40px 0px;
		}
	}
</style>